<template>
  <n-card title="告警记录">
    <n-space vertical>
      <n-data-table
        :columns="columns"
        :data="alarmList"
        :pagination="pagination"
        :loading="loading"
      />
    </n-space>
  </n-card>
</template>

<script lang="ts" setup>
import { h, ref, reactive, onMounted } from 'vue';
import { NDataTable, NButton,NTag , NSpace, useMessage } from 'naive-ui';

const message = useMessage();
const loading = ref(false);

// 添加页面标题设置
const setPageTitle = () => {
  document.title = '告警记录 - 数据中心';
};

onMounted(() => {
  setPageTitle();
});

const alarmList = ref([
  // 示例数据
  {
    id: 1,
    alarmTime: '2023-10-01 10:00:00',
    screenshot: 'https://example.com/screenshot1.jpg',
    videoClip: 'https://example.com/video1.mp4',
    exceptionType: '异常类型1',
    alarmLevel: '高',
    processStatus: '未处理',
    archiveStatus: '未归档'
  },
  // 更多示例数据...
]);

// 修改分页配置
const pagination = reactive({
  page: 1,
  pageSize: 10,
  showSizePicker: true,
  pageSizes: [10, 20, 30],
  showQuickJumper: true
});

const columns = ref([
  { title: '报警时间', key: 'alarmTime', width: 150 },
  {
    title: '报警截图',
    key: 'screenshot',
    render(row) {
      return h(NSpace, {}, [
        h(NButton, {
          text: true,
          type: 'primary',
          onClick: () => {
            if (row.screenshot) {
              window.open(row.screenshot, '_blank');
            } else {
              message.warning('暂无截图');
            }
          }
        }, '查看截图')
      ]);
    }
  },
  {
    title: '录制片段',
    key: 'videoClip',
    render(row) {
      return h(NButton, {
        text: true,
        type: 'primary',
        onClick: () => {
          if (row.videoClip) {
            window.open(row.videoClip, '_blank');
          }
        }
      }, '查看视频');
    }
  },
  { title: '异常类型', key: 'exceptionType' },
  {
    title: '报警等级',
    key: 'alarmLevel',
    render(row) {
      const levelColor = row.alarmLevel === '高' ? 'red' : row.alarmLevel === '中' ? 'orange' : 'green';
      return h('span', { style: { color: levelColor } }, row.alarmLevel);
    }
  },
  {
    title: '处理状态',
    key: 'processStatus',
    render(row) {
      return h(NTag, {
        type: row.processStatus === '已处理' ? 'success' : 'error'
      }, row.processStatus);
    }
  },
  {
    title: '归档状态',
    key: 'archiveStatus',
    render(row) {
      return h(NTag, {
        type: row.archiveStatus === '已归档' ? 'success' : 'default'
      }, row.archiveStatus);
    }
  },
  {
    title: '操作',
    key: 'actions',
    render(row) {
      return h(NSpace, {}, [
        h(NButton, {
          size: 'small',
          onClick: () => handleProcess(row)
        }, '处理'),
        h(NButton, {
          size: 'small',
          onClick: () => handleArchive(row)
        }, '归档')
      ]);
    }
  },
]);



function handleProcess(row) {
  // 处理逻辑
  message.success(`处理告警：${row.id}`);
}

function handleArchive(row) {
  // 归档逻辑
  message.success(`归档告警：${row.id}`);
}
</script>
